<template>
    <div>
        <BreadCrumb name1="数据统计" name2="数据报表"></BreadCrumb>
        <el-card>
            <div id="main" style="width: 1000px;height:400px;"></div>
        </el-card>
    </div>
</template>

<script>
import BreadCrumb from '@/components/BreadCrumb';
import {Get_ReportData} from '@/api/report.js';
import * as echarts from 'echarts';
import _ from 'lodash';
    export default {
        data(){
            return{
                reportOptions:[]
            }
        },
        components:{
            BreadCrumb
        },
        async mounted(){
            const result = await Get_ReportData();
                console.log(result);
                if(result.meta.status == 200){
                    this.reportOptions = result.data;
                }
            const myEchart = echarts.init(document.getElementById('main'));
            const option = {
                    title: {
                        text: '用户来源'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                };
                const newOptions = _.merge(this.reportOptions,option)
                myEchart.setOption(newOptions);
        },
        methods:{}
    }
</script>

<style lang="scss" scoped>

</style>